<template>
  <div>
    <tableHeader />
    <!-- 网关详情模块 -->
    <el-tabs type="border-card" :before-leave="onBeforeLeave">
      <el-tab-pane class="config-tab-pane" label="网关详情模块">
        <el-row :gutter="19">
          <el-col class="xs-mb-20" :xs="24" :sm="24" :lg="12">
            <el-card shadow="always" header="基本信息">
              <div class="detail">
                <el-descriptions :column="2" border direction="vertical">
                  <el-descriptions-item
                    label="编号"
                    label-align="left"
                    align="center"
                    >{{ accessPointer.single.code }}
                  </el-descriptions-item>
                  <el-descriptions-item
                    label="型号"
                    label-align="left"
                    align="center"
                    >{{ accessPointer.single.type }}
                  </el-descriptions-item>
                  <el-descriptions-item
                    label="地址(mqtt)"
                    label-align="left"
                    align="center"
                    >{{ accessPointer.single.mqttAddr }}
                  </el-descriptions-item>
                  <el-descriptions-item
                    label="端口(mqtt)"
                    label-align="left"
                    align="center"
                    >{{ accessPointer.single.mqttPort }}
                  </el-descriptions-item>
                  <el-descriptions-item
                    label="用户名"
                    label-align="left"
                    align="center"
                    >{{ accessPointer.single.mgttName }}
                  </el-descriptions-item>
                  <el-descriptions-item
                    label="密码"
                    label-align="left"
                    align="center"
                    >{{ accessPointer.single.mgttPassword }}
                  </el-descriptions-item>
                  <el-descriptions-item
                    label="命令队列名"
                    label-align="left"
                    align="center"
                    >{{ accessPointer.single.cmdName }}
                  </el-descriptions-item>
                  <el-descriptions-item
                    label="状态队列名"
                    label-align="left"
                    align="center"
                    >{{ accessPointer.single.stateName }}
                  </el-descriptions-item>
                  <el-descriptions-item
                    label="数据队列名"
                    label-align="left"
                    align="center"
                    >{{ accessPointer.single.topic }}
                  </el-descriptions-item>
                  <el-descriptions-item
                    label="流量卡号"
                    label-align="left"
                    align="center"
                    >{{ accessPointer.single.cardNumber }}
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </el-card>
          </el-col>
          <el-col class="xs-mb-20" :xs="24" :sm="24" :lg="12">
            <el-card shadow="always" header="流量展示">
              <!-- 流量展示模块 -->
              <GF :gateway-info="accessPointer.single" />
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, provide, onMounted, computed } from "vue";
import tableHeader from "./tableHeader.vue";
import GF from "@/components/GatewayFlow/index.vue";
import { useAccessPoint } from "@/store/backend/AccessPointM/accessPoint";

const accessPointer = useAccessPoint();

//标签页面切换之前调用的方法
const onBeforeLeave = () => {};

onMounted(() => {
  //获取设备信息
});
</script>
<style lang="scss" scoped></style>
